APIهای عملکرد وب: اندازه‌گیری زمان‌بندی برای تجربه‌های کاربری برتر

در چشم‌انداز دیجیتال امروز، یک وب‌سایت سریع و پاسخگو دیگر یک مزیت لوکس نیست؛ بلکه یک ضرورت است. کاربران انتظار تجربیات یکپارچه دارند و حتی یک تأخیر جزئی می‌تواند منجر به ناامیدی، رها کردن سبد خرید و در نهایت، از دست رفتن درآمد شود. APIهای عملکرد وب ابزارهایی را در اختیار توسعه‌دهندگان قرار می‌دهند تا جنبه‌های مختلف عملکرد وب‌سایت را به دقت اندازه‌گیری کنند و به آن‌ها اجازه دهند تا گلوگاه‌ها را شناسایی کرده و تجربه کاربری (UX) را بهینه‌سازی کنند.

درک اهمیت معیارهای تجربه کاربری

پیش از پرداختن به جزئیات فنی APIها، درک این موضوع که چرا معیارهای UX بسیار مهم هستند، حیاتی است. این معیارها روشی کمی برای ارزیابی نحوه درک کاربران از سرعت و پاسخگویی وب‌سایت شما ارائه می‌دهند. UX ضعیف می‌تواند تأثیر منفی بر موارد زیر داشته باشد:

• نرخ پرش (Bounce Rate): زمان‌های بارگذاری کند اغلب باعث می‌شود کاربران قبل از تعامل با محتوای وب‌سایت شما، آن را ترک کنند.
• نرخ تبدیل (Conversion Rates): یک تجربه کاربری ناامیدکننده می‌تواند مشتریان بالقوه را از تکمیل تراکنش‌ها منصرف کند.
• رتبه در موتورهای جستجو: موتورهای جستجو مانند گوگل، وب‌سایت‌هایی با عملکرد خوب را در اولویت قرار می‌دهند که بر دیده شدن شما در نتایج جستجو تأثیر می‌گذارد. معیارهای حیاتی وب (Core Web Vitals) که به شدت به APIهای عملکرد متکی هستند، یک فاکتور رتبه‌بندی محسوب می‌شوند.
• تصور از برند: یک وب‌سایت کند می‌تواند تأثیر منفی بر برند شما ایجاد کند و نشان‌دهنده عدم توجه به جزئیات و تجربه کاربری ضعیف باشد.

APIها و معیارهای کلیدی عملکرد وب

چندین API عملکرد وب در دسترس هستند که هر کدام بینش‌های منحصربه‌فردی در مورد جنبه‌های مختلف عملکرد وب‌سایت ارائه می‌دهند. در اینجا برخی از مهم‌ترین آن‌ها آورده شده است:

1. Navigation Timing API

Navigation Timing API اطلاعات زمان‌بندی دقیقی را در رابطه با بارگذاری یک سند ارائه می‌دهد. این API به شما امکان می‌دهد زمان صرف شده برای مراحل مختلف فرآیند بارگذاری را اندازه‌گیری کنید، مانند:

• navigationStart: مهر زمانی درست قبل از اینکه مرورگر شروع به واکشی سند کند.
• fetchStart: مهر زمانی درست قبل از اینکه مرورگر شروع به واکشی سند از شبکه کند.
• domainLookupStart: مهر زمانی درست قبل از اینکه مرورگر جستجوی DNS برای دامنه سند را شروع کند.
• domainLookupEnd: مهر زمانی درست پس از اینکه مرورگر جستجوی DNS را تکمیل می‌کند.
• connectStart: مهر زمانی درست قبل از اینکه مرورگر شروع به برقراری ارتباط با سرور کند.
• connectEnd: مهر زمانی درست پس از اینکه مرورگر برقراری ارتباط با سرور را به پایان می‌رساند.
• requestStart: مهر زمانی درست قبل از اینکه مرورگر درخواست HTTP برای سند را ارسال کند.
• responseStart: مهر زمانی درست پس از اینکه مرورگر اولین بایت از پاسخ HTTP را دریافت می‌کند.
• responseEnd: مهر زمانی درست پس از اینکه مرورگر کل پاسخ HTTP را دریافت می‌کند.
• domLoading: مهر زمانی درست قبل از اینکه مرورگر document.readyState را روی "loading" تنظیم کند.
• domInteractive: مهر زمانی درست پس از اینکه مرورگر سند HTML را تجزیه کرده و DOM آماده است.
• domContentLoadedEventStart: مهر زمانی درست قبل از اینکه مرورگر رویداد DOMContentLoaded را فعال کند.
• domContentLoadedEventEnd: مهر زمانی درست پس از اینکه مرورگر رویداد DOMContentLoaded را فعال می‌کند.
• domComplete: مهر زمانی درست پس از اینکه مرورگر document.readyState را روی "complete" تنظیم می‌کند.
• loadEventStart: مهر زمانی درست قبل از اینکه مرورگر رویداد load را فعال کند.
• loadEventEnd: مهر زمانی درست پس از اینکه مرورگر رویداد load را فعال می‌کند.

مثال: محاسبه زمان صرف شده برای جستجوی DNS:

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`DNS Lookup Time: ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. Resource Timing API

Resource Timing API اطلاعات زمان‌بندی دقیقی برای منابع جداگانه‌ای که توسط یک صفحه وب بارگذاری می‌شوند، مانند تصاویر، فایل‌های CSS، فایل‌های جاوا اسکریپت و فونت‌ها، ارائه می‌دهد. این API به شما کمک می‌کند تا شناسایی کنید کدام منابع بیشترین زمان را برای بارگذاری صرف می‌کنند و تحویل آن‌ها را بهینه‌سازی کنید.

معیارهای کلیدی:

• name: آدرس URL منبع.
• startTime: مهر زمانی که مرورگر شروع به واکشی منبع می‌کند.
• responseEnd: مهر زمانی که مرورگر آخرین بایت منبع را دریافت می‌کند.
• duration: کل زمان صرف شده برای بارگذاری منبع (responseEnd - startTime).
• transferSize: اندازه منبع منتقل شده از طریق شبکه.
• encodedBodySize: اندازه منبع قبل از فشرده‌سازی.
• decodedBodySize: اندازه منبع پس از خارج شدن از حالت فشرده.

مثال: شناسایی بزرگترین تصویر در صفحه:

            const resourceTiming = performance.getEntriesByType("resource");

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Largest Image: ${largestImage}, Size: ${largestImageSize} bytes`);
            

              
                Copy
              
            
          

3. User Timing API

User Timing API به شما امکان می‌دهد معیارهای عملکرد سفارشی تعریف کنید و زمان صرف شده برای بلوک‌های کد خاص یا تعاملات کاربر را اندازه‌گیری کنید. این API به ویژه برای ردیابی عملکرد توابع حیاتی جاوا اسکریپت یا اجزای پیچیده UI مفید است.

متدهای کلیدی:

• performance.mark(markName): یک مهر زمانی با نام مشخص ایجاد می‌کند.
• performance.measure(measureName, startMark, endMark): یک اندازه‌گیری عملکرد بین دو نشانه ایجاد می‌کند.
• performance.getEntriesByType("measure"): تمام اندازه‌گیری‌های عملکرد را بازیابی می‌کند.

مثال: اندازه‌گیری زمان صرف شده برای رندر یک کامپوننت پیچیده React:

            performance.mark("componentRenderStart");

// Code to render the React component
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Component Render Time: ${renderTime} ms`);
            

              
                Copy
              
            
          

4. Long Tasks API

Long Tasks API به شما کمک می‌کند تا وظایفی را که نخ اصلی (main thread) را برای بیش از 50 میلی‌ثانیه مسدود می‌کنند، شناسایی کنید. این وظایف طولانی می‌توانند باعث پرش UI (jank) شده و بر تجربه کاربری تأثیر منفی بگذارند. با شناسایی و بهینه‌سازی این وظایف، می‌توانید پاسخگویی وب‌سایت خود را بهبود بخشید.

مثال: ثبت وظایف طولانی در کنسول:

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Long Task:", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. Paint Timing API

Paint Timing API دو معیار کلیدی مربوط به رندر بصری یک صفحه وب را ارائه می‌دهد:

• First Paint (FP): زمانی که مرورگر اولین پیکسل را روی صفحه رندر می‌کند.
• First Contentful Paint (FCP): زمانی که مرورگر اولین قطعه از محتوا (مانند تصویر، متن) را روی صفحه رندر می‌کند.

این معیارها برای درک اینکه کاربران با چه سرعتی بازخورد بصری اولیه را از وب‌سایت شما دریافت می‌کنند، بسیار مهم هستند.

مثال: بازیابی FCP:

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint: ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) یکی از معیارهای حیاتی وب (Core Web Vital) است که زمان لازم برای نمایان شدن بزرگترین عنصر محتوایی (مانند تصویر، ویدیو، بلوک متنی) در دیدرس (viewport) را اندازه‌گیری می‌کند. امتیاز خوب LCP نشان می‌دهد که محتوای اصلی صفحه به سرعت بارگذاری می‌شود و تجربه کاربری بهتری را فراهم می‌کند.

موارد قابل بهینه‌سازی برای LCP:

• بهینه‌سازی تصاویر: از فرمت‌های مناسب تصویر (مانند WebP) استفاده کنید، تصاویر را فشرده کرده و از تصاویر واکنش‌گرا استفاده کنید.
• بهینه‌سازی CSS: فایل‌های CSS را کوچک‌سازی و فشرده کنید و از CSS مسدودکننده رندر (render-blocking) اجتناب کنید.
• بهینه‌سازی جاوا اسکریپت: جاوا اسکریپت غیرحیاتی را به تعویق بیندازید و از وظایف طولانی‌مدت جاوا اسکریپت خودداری کنید.
• زمان پاسخ سرور: اطمینان حاصل کنید که سرور شما به سرعت به درخواست‌ها پاسخ می‌دهد.

7. Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) یکی دیگر از معیارهای حیاتی وب است که پایداری بصری یک صفحه وب را اندازه‌گیری می‌کند. این معیار میزان جابجایی‌های غیرمنتظره طرح‌بندی را که در طول فرآیند بارگذاری رخ می‌دهد، کمی‌سازی می‌کند. امتیاز پایین CLS نشان می‌دهد که صفحه از نظر بصری پایدار است و تجربه کاربری دلپذیرتری را فراهم می‌کند.

چه عواملی باعث جابجایی طرح‌بندی می‌شوند:

• تصاویر بدون ابعاد: همیشه ویژگی‌های عرض و ارتفاع را برای تصاویر مشخص کنید.
• تبلیغات، محتوای جاسازی شده و iframeها بدون فضای رزرو شده: برای این عناصر فضا رزرو کنید تا از ایجاد جابجایی طرح‌بندی توسط آن‌ها جلوگیری شود.
• محتوای تزریق شده به صورت پویا: هنگام تزریق محتوا به صورت پویا مراقب باشید، زیرا می‌تواند باعث جابجایی‌های غیرمنتظره طرح‌بندی شود.
• فونت‌های وب که باعث FOIT/FOUT می‌شوند: بارگذاری فونت را بهینه‌سازی کنید تا تأثیر Font-Of-Invisible-Text (FOIT) و Font-Of-Unstyled-Text (FOUT) به حداقل برسد.

8. Interaction to Next Paint (INP)

Interaction to Next Paint (INP) یک معیار حیاتی وب است که پاسخگویی یک صفحه وب به تعاملات کاربر را اندازه‌گیری می‌کند. این معیار تأخیر تمام کلیک‌ها، لمس‌ها و تعاملات صفحه‌کلیدی را که کاربر در طول بازدید خود از یک صفحه انجام می‌دهد، ارزیابی می‌کند. INP در مارس 2024 جایگزین First Input Delay (FID) به عنوان یک معیار حیاتی وب شد.

بهبود INP:

• بهینه‌سازی اجرای جاوا اسکریپت: وظایف طولانی را به قطعات کوچکتر و ناهمزمان تقسیم کنید تا از مسدود شدن نخ اصلی جلوگیری شود.
• به تعویق انداختن جاوا اسکریپت غیرحیاتی: فقط جاوا اسکریپت لازم برای رندر اولیه را بارگذاری کرده و بقیه را به تعویق بیندازید.
• استفاده از Web Workers: وظایف محاسباتی سنگین را به Web Workers منتقل کنید تا از مسدود شدن نخ اصلی توسط آن‌ها جلوگیری شود.
• بهینه‌سازی کنترل‌کننده‌های رویداد (Event Handlers): اطمینان حاصل کنید که کنترل‌کننده‌های رویداد کارآمد هستند و از انجام عملیات غیرضروری خودداری می‌کنند.

مثال‌های عملی و قطعه کدها

در اینجا چند مثال عملی از نحوه استفاده از APIهای عملکرد وب برای اندازه‌گیری و بهینه‌سازی عملکرد وب‌سایت آورده شده است:

مثال ۱: اندازه‌گیری زمان بارگذاری صفحه

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Page Load Time: ${loadTime} ms`);
});
            

              
                Copy
              
            
          

مثال ۲: شناسایی منابع با بارگذاری کند

            const resourceTiming = performance.getEntriesByType("resource");

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Slow Resource: ${resource.name}, Duration: ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

مثال ۳: اندازه‌گیری زمان تا تعامل (TTI) - تخمین

توجه: TTI یک معیار پیچیده است و این یک تخمین ساده‌شده است. TTI واقعی به رویکرد پیچیده‌تری نیاز دارد.

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Approximate Time to Interactive: ${tti} ms`);
});
            

              
                Copy
              
            
          

راهکارهای عملی برای بهینه‌سازی تجربه کاربری

پس از جمع‌آوری داده‌های عملکرد با استفاده از APIهای عملکرد وب، می‌توانید از راهکارهای عملی زیر برای بهینه‌سازی تجربه کاربری وب‌سایت خود استفاده کنید:

• بهینه‌سازی تصاویر: برای کاهش زمان بارگذاری تصاویر، آن‌ها را فشرده کنید، از فرمت‌های مناسب (مانند WebP) استفاده کنید و تصاویر واکنش‌گرا به کار ببرید.
• کوچک‌سازی و فشرده‌سازی کد: فایل‌های HTML، CSS و جاوا اسکریپت را کوچک‌سازی و فشرده کنید تا حجم آن‌ها کاهش یافته و زمان بارگذاری بهبود یابد.
• استفاده از حافظه پنهان مرورگر (Caching): سرور خود را طوری پیکربندی کنید که هدرهای کش مناسب را تنظیم کند تا امکان کش شدن منابع ایستا توسط مرورگر فراهم شود.
• استفاده از شبکه تحویل محتوا (CDN): محتوای وب‌سایت خود را در سرورهای متعدد در نقاط جغرافیایی مختلف توزیع کنید تا تأخیر برای کاربران در مکان‌های مختلف کاهش یابد. ارائه‌دهندگان محبوب CDN شامل Cloudflare، Akamai و Amazon CloudFront هستند.
• بهینه‌سازی بارگذاری فونت: از font-display: swap استفاده کنید تا از مسدود شدن توسط فونت جلوگیری کرده و سرعت بارگذاری درک شده وب‌سایت خود را بهبود بخشید.
• کاهش درخواست‌های HTTP: با ترکیب فایل‌های CSS و جاوا اسکریپت، درون‌خطی کردن CSS حیاتی و استفاده از CSS sprites، تعداد درخواست‌های HTTP را به حداقل برسانید.
• به تعویق انداختن منابع غیرحیاتی: بارگذاری منابع غیرحیاتی، مانند تصاویر و فایل‌های جاوا اسکریپت را تا پس از بارگذاری اولیه صفحه به تعویق بیندازید.
• بهینه‌سازی زمان پاسخ سرور: با بهینه‌سازی کد سمت سرور و کوئری‌های پایگاه داده، اطمینان حاصل کنید که سرور شما به سرعت به درخواست‌ها پاسخ می‌دهد.
• نظارت منظم بر عملکرد: به طور مداوم عملکرد وب‌سایت خود را با استفاده از APIهای عملکرد وب و سایر ابزارهای نظارت بر عملکرد زیر نظر بگیرید تا هرگونه مشکل عملکردی را شناسایی و برطرف کنید. ابزارهایی مانند Google PageSpeed Insights، WebPageTest و Lighthouse می‌توانند بینش‌های ارزشمندی ارائه دهند.

ابزارها و کتابخانه‌ها برای نظارت بر عملکرد

چندین ابزار و کتابخانه می‌توانند به شما در نظارت و تحلیل عملکرد وب‌سایت با استفاده از APIهای عملکرد وب کمک کنند:

• Google PageSpeed Insights: ابزاری رایگان که عملکرد وب‌سایت شما را تحلیل کرده و توصیه‌هایی برای بهبود ارائه می‌دهد.
• WebPageTest: ابزاری رایگان که به شما امکان می‌دهد عملکرد وب‌سایت خود را از مکان‌ها و مرورگرهای مختلف آزمایش کنید.
• Lighthouse: یک ابزار متن‌باز و خودکار برای بهبود کیفیت صفحات وب. این ابزار ممیزی‌هایی برای عملکرد، دسترسی‌پذیری، برنامه‌های وب پیش‌رونده، سئو و موارد دیگر دارد.
• New Relic: یک پلتفرم جامع نظارت بر عملکرد که بینش‌های آنی در مورد عملکرد وب‌سایت ارائه می‌دهد.
• Datadog: یک پلتفرم نظارت و تحلیل که دید کاملی از کل زیرساخت شما، از جمله عملکرد وب‌سایت، فراهم می‌کند.
• Sentry: یک پلتفرم ردیابی خطای آنی و نظارت بر عملکرد.
• Web Vitals Chrome Extension: یک افزونه کروم که معیارهای حیاتی وب را به صورت آنی نمایش می‌دهد.

ملاحظات برای مخاطبان جهانی

هنگام بهینه‌سازی عملکرد وب‌سایت برای مخاطبان جهانی، در نظر گرفتن عوامل زیر مهم است:

• موقعیت جغرافیایی: از یک CDN برای توزیع محتوای خود در سرورهای متعدد جغرافیایی استفاده کنید تا تأخیر برای کاربران در مکان‌های مختلف کاهش یابد.
• شرایط شبکه: وب‌سایت خود را برای کاربرانی با اتصالات شبکه کند یا نامطمئن با استفاده از تکنیک‌هایی مانند فشرده‌سازی تصویر، کوچک‌سازی کد و کش مرورگر بهینه‌سازی کنید.
• قابلیت‌های دستگاه: وب‌سایت خود را برای دستگاه‌های مختلف، از جمله تلفن‌های همراه، تبلت‌ها و دسکتاپ‌ها، با استفاده از طراحی واکنش‌گرا و تکنیک‌های بارگذاری تطبیقی بهینه‌سازی کنید.
• زبان و بومی‌سازی: اطمینان حاصل کنید که وب‌سایت شما برای زبان‌ها و مناطق مختلف بومی‌سازی شده است، از جمله ترجمه محتوا و تنظیم طرح‌بندی‌ها برای جهت‌های مختلف متن.
• دسترسی‌پذیری: با پیروی از دستورالعمل‌های دسترسی‌پذیری مانند WCAG، اطمینان حاصل کنید که وب‌سایت شما برای کاربران دارای معلولیت قابل دسترس است.

نتیجه‌گیری

APIهای عملکرد وب ابزارهای ارزشمندی برای اندازه‌گیری و بهینه‌سازی عملکرد وب‌سایت فراهم می‌کنند. با درک و استفاده از این APIها، توسعه‌دهندگان می‌توانند گلوگاه‌های عملکرد را شناسایی کرده، تجربه کاربری را بهبود بخشند و در نهایت موفقیت کسب‌وکار را به ارمغان آورند. به یاد داشته باشید که معیارهای حیاتی وب (LCP، CLS و INP) را به عنوان معیارهای کلیدی برای سلامت کلی وب‌سایت و رضایت کاربر در اولویت قرار دهید. با نظارت و بهینه‌سازی مداوم عملکرد وب‌سایت خود، می‌توانید تجربه‌ای سریع، پاسخگو و جذاب برای کاربران در سراسر جهان تضمین کنید.